<template>
	<view id="voteIndex">
		<view :class="{'my-tabs':true,}">
			<view v-for="(item,index) in topList" :key="index" :class="{'tab-item':true,'active':moveIndex==index}"
				@tap="tapClick(index)">
				{{item}}
				<text v-if="publicityRedDotsTotal && publicityRedDotsTotal > 0 && item =='公示'"
					class="redDotsStyle"></text>
			</view>
		</view>
		<view class="vote-cont" v-if="moveIndex == 0">
			<view v-if="voteType == 1">
				<view class="vote-title">
					{{voteDetailInfo.community_name}}
					{{voteDetailInfo.vote_type == 1 ? '首次成立业主大会申请' : voteDetailInfo.vote_type == 2 ? '解聘物业临时业主大会申请' :'解聘物业临时业主大会申请'}}
				</view>
				<view class="vote-wrap">
					<view class="vote-item">
						<view class="agree">已同意人数</view>
						<view class="person-num"><text style="color: #427705;"> {{voteDetailInfo.secondedTotal}}人
							</text> {{voteDetailInfo.ratioStr}}</view>
						<view class="person-assets">
							<view style="text-align: center;">
								<view class="person-txt">总户数</view>
								<view class="person-number">{{voteDetailInfo.household_total}} 户</view>
							</view>
							<view class="line"></view>
							<view style="text-align: center;">
								<view class="person-txt">小区面积</view>
								<view class="person-number">{{voteDetailInfo.community_areass}} 平方米</view>
							</view>
						</view>
					</view>

					<view class="vote-item1">
						<view class="person-assets">
							<view style="text-align: center;">
								<view class="person-txt">发起人</view>
								<view class="person-number">{{voteDetailInfo.full_name}}</view>
							</view>
							<view class="line" style="margin:0 40rpx"></view>
							<view style="text-align: center;">
								<view class="person-txt">发起人楼号</view>
								<view class="person-number">{{voteDetailInfo.building_number}}</view>
							</view>
							<view class="line" style="margin:0 40rpx"></view>
							<view style="text-align: center;">
								<view class="person-txt">电话</view>
								<view class="person-number">{{voteDetailInfo.telephone}}</view>
							</view>
						</view>
					</view>
					<view class="vote-item1">
						<view class="person-assets">
							<view style="text-align: center;">
								<view class="person-txt">需收集附议份数</view>
								<view class="person-number">{{voteSetInfo.passRoomTotal}}份</view>
							</view>
							<view class="line" style="margin:0 88rpx"></view>
							<view style="text-align: center;">
								<view class="person-txt">需收集总面积</view>
								<view class="person-number">{{voteSetInfo.passAreaTotal}}㎡</view>
							</view>
						</view>
					</view>
					<view :class="voteUserInfo.reconsideration_status == 1 ? 'vote-success' : 'vote-start'"
						v-if="voteUserInfo" @click="requestSeconding">
						{{voteUserInfo.reconsideration_status == 1 ? "附议成功" : "我附议申请"}}
					</view>
					<view class="vote-start" v-if="!voteUserInfo" @click="requestSeconding">
						业主认证
					</view>
					<view class="vote-bottom-txt">
						附议代表您确认申请该小区首次成立业委会
					</view>
				</view>
			</view>
			<view v-if="voteType == 2 || voteType == 7 ">
				<vote-status :id='voteId' :voteType='voteType'></vote-status>
			</view>
			<view v-if="voteType == 3 || voteType == 8">
				<vote-three :id='voteId' :voteType='voteType' @stepFun='stepFun'></vote-three>
			</view>
			<view v-if="voteType == 4 || voteType == 5 || voteType == 6 || voteType == 9">
				<vote-four :id='voteId' :directorType='voteType'></vote-four>
			</view>
			<view v-if="voteType == 10">
				<CheckOrgVote :id='voteId' :directorType='voteType'></CheckOrgVote>
			</view>
			<view v-if="!voteType">
				<view style="width: 232px;height: 242px;margin: 110px auto;">
					<image style="width: 100%;height: 100%;"
						src="../../static/image/9015d0e9f45344c4007d408cd271f6a.png" mode=""></image>
				</view>
				<view style="width: 62%;margin: -66px auto;text-align: center;color: #999;">暂无数据</view>
			</view>
		</view>
		<!-- 公示 -->
		<view v-if="moveIndex == 1">
			<publicity v-on:ToChangeRedDots="getVoteDots()" :voteId="voteId"
				:communityName="voteDetailInfo.community_name" @changeIndex="changeIndex"></publicity>
		</view>

		<!-- 投票记录 -->
		<view v-if="moveIndex  == 2">
			<vote-record :id='id' :proName='voteDetailInfo.community_name'></vote-record>
		</view>

		<!-- 开始附议弹框 -->
		<view style="position: relative;">
			<view class="meeting-dialog">
				<u-popup v-model="isSencond" mode="center" border-radius="14">
					<view class="meeting-wrap">
						<view class="meeting-title">
							{{ voteUserStatus == 1?'附议成功':'未提交认证' }}
						</view>
						<view class="meeting-start">
							<image class="img" src="../../static/vote/seconded.png"></image>
						</view>
						<view class="meeting-cont" v-if="voteUserStatus ==2 ">
							请先进行实名认证后进行附议
						</view>
						<view class="meeting-cont succ" v-else>
							附议成功！请及时关注小区动态！！
						</view>
						<view class="meeting-btn" @click="submit()">
							{{ voteUserStatus == 1?'确定':'提交认证' }}
						</view>
					</view>
				</u-popup>
			</view>
		</view>

		<u-popup v-model="shareBool" mode="bottom">
			<view class="popup-all">
				<view class="fx">分享</view>
				<view style="display: flex;">
					<view @click="share(item)" v-for="(item,index) in shareList" class="share-detail">
						<view class="image-all">
							<image :src="item.shareImage"></image>
						</view>
						<view class="font">{{item.shareName}}</view>
					</view>
				</view>
				<view class="cancel" @click="shareBool = false">取消</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import VoteRecord from './components/VoteRecord.vue'
	import Publicity from './components/Publicity.vue'
	import VoteStatus from './components/VoteStatus.vue'
	import VoteThree from './components/VoteThree.vue'
	import VoteFour from './components/VoteFour.vue'
	import CheckOrgVote from './components/CheckOrgVote.vue'

	export default {
		props: ['modelData', 'initIndex'],
		components: {
			VoteRecord,
			Publicity,
			VoteStatus,
			VoteThree,
			VoteFour,
			CheckOrgVote
		},
		data() {
			return {
				vote_type: null, //表决类型：1.申请成立业主大会 2.解聘现物业公司
				topList: ["投票", "公示", "投票记录"], //导航
				moveIndex: 0, //顶部选中下标
				voteId: null, //主键id
				voteDetailInfo: {}, //表决详情
				voteSetInfo: {}, //表决设置信息
				voteType: null, //1.附议 2.筹备组报名
				user_id: uni.getStorageSync('rawData').userId,
				voteUserInfo: {}, //投票用户信息
				voteUserStatus: 1, //附议是否通过 1 已认证 2 未认证
				publicityRedDotsTotal: null, //公示红点数量


				id: '',
				defaultInfo: {
					data: [{
							label: "投票"
						},
						{
							label: "公示"
						},
					],
				},

				activeIndex: 0, //默认索引
				isSencond: false, //是否开始附议
				voteCurStatus: 1, //投票当前状态

				listData: {},
				noticeList: [],
				parationList: [],
				voteRecordList: [],
				ownerInfo: {
					userId: '', //用户id
					userName: '', //用户姓名
					userTal: '', //用户电话
					address: '', //小区名称
					area: '', //房间面积
					community_name: '',
				},
				ownerInformation: '',
				rawData: {},
				percentageList: [], //百分比
				shareBool: false,
				shareList: [{
						shareImage: '../../static/image/wechatFriend.png',
						shareName: '微信好友',
						shareType: 'WXSceneSession',
						type: 'weixin'
					},
					{
						shareImage: '../../static/image/weChat-pyq.png',
						shareName: '朋友圈',
						shareType: 'WXSenceTimeline',
						type: 'weixin'
					}
				],
				vote_steps: 0,
				centtert: {},
				applyData: {},
				fyType: false,
				radio: '',
				voteSecondmentId: null,
				Secondmentupdte: {}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.voteId = options.id
			}
			if (options.vote_type) {
				this.vote_type = options.vote_type
			}
		},
		onNavigationBarButtonTap(e) {
			this.shareBool = true
		},

		created() {
			uni.$on('stepFun', data => {
				this.voteCurStatus = data;
			})
		},
		mounted() {
			//只要能进详情页就绑定一条数据，该用户与该表决的基本信息
			this.addBaseVoteUserInfo();
			//获取投票类型
			this.getVoteTypeById();
			//表决详情
			this.getVoteDetailInfoById();
			//人员详情
			this.getVoteUserInfo();
			//获取投票红点
			this.getVoteDots()

		},
		onShow() {

		},
		methods: {
			//绑定用户认证基本信息
			addBaseVoteUserInfo() {
				this.$requestYz.api.bindBaseInfo({
					user_id: this.user_id,
					essential_information_id: this.voteId,
					user_id_zyw: this.user_id,
					full_name: uni.getStorageSync('rawData').userName,
					telephone: uni.getStorageSync('rawData').userTel,
				}).then(res => {})
			},
			//获取投票红点
			getVoteDots() {
				if (!this.user_id) {
					return;
				}
				this.$requestYz.api.getVoteRedDotsInfo({
					userId: this.user_id,
					voteId: this.voteId
				}).then(res => {
					if (res.data.data) {
						this.publicityRedDotsTotal = res.data.data.redDotsTotal
					}
					if (res.data.data.redDotsTotal > 0) {
						this.moveIndex = 1
					}

				})
			},
			//子页面公示，点击附议修改该页面导航下标
			changeIndex(val) {
				this.tapClick(val);
			},
			//提交认证
			submit() {
				this.isSencond = false;
				if (this.voteUserInfo.id && this.voteUserInfo.building_number) {
					return;
				}
				uni.navigateTo({
					url: './submitAuth?vote_id=' + this.voteId + "&proName=" + this.voteDetailInfo.community_name
				})
			},
			requestSeconding() {
				if (this.voteUserInfo.id && this.voteUserInfo.building_number) {
					if (this.voteUserInfo.reconsideration_status == 1) {
						this.getVoteUserInfo();
						return;
					} else {
						//2023-6-1，解聘物业，委员身份，只有委员可附议
						if (this.voteDetailInfo.vote_type == 2 && this.voteDetailInfo.identity_type == 2) {
							if (this.voteUserInfo.committee_member_status != 1) {
								uni.showToast({
									title: '该附议只限委员可附议！',
									icon: 'error'
								});
								return;
							}
						}

						//附议
						this.$requestYz.api.updateVoteUserInfo({
							id: this.voteUserInfo.id,
							reconsideration_status: 1,
							voteType: 1, //标识参数，附议投票
						}).then(res => {
							this.voteUserStatus = 1;
							this.getVoteUserInfo();
							this.getVoteDetailInfoById();
							this.getVoteTypeById();
							this.isSencond = true;
						})
					}
				} else {
					//跳转认证
					this.isSencond = true;
					this.voteUserStatus = 2;
				}
			},
			//根据id获取投票信息
			getVoteTypeById() {
				this.$requestYz.api.getVoteType({
					id: this.voteId
				}).then(res => {
					if (res.data.data) {
						this.voteType = res.data.data.data
					}
				})
			},
			//获取表决投票类型 1.附议 2.筹备组报名 
			getVoteDetailInfoById() {
				this.$requestYz.api.getVoteDetailInfo({
					id: this.voteId,
					selectPassNumber: 1
				}).then(res => {
					if (res.data.data.voteInfo) {
						this.voteDetailInfo = res.data.data.voteInfo;
					}
					//后台设置信息
					if (res.data.data.voteSet) {
						this.voteSetInfo = res.data.data.voteSet;
					}
				})
			},
			getVoteUserInfo() {
				this.$requestYz.api.getVoteUserInfo({
					vote_id: this.voteId,
					user_id: this.user_id
				}).then(res => {
					this.voteUserInfo = res.data.data
				})
			},
			//顶部导航点击时事件
			tapClick(index) {
				this.moveIndex = index;
				if (index == 0) {
					this.getVoteTypeById();
					this.getVoteDots()
				}
				if (index == 1) {

				}
			},


			// 分享
			share(item) {
				let that = this;
				// #ifdef APP-PLUS
				uni.share({
					provider: item.type,
					scene: item.shareType,
					type: 0,
					href: "https://s.515f.com/#/pages/h5goTo/h5share?id=" + this.id,
					title: this.listData.community_name + '首次成立业主大会申请',
					summary: this.listData.community_name + '首次成立业主大会申请已开启附议投票，您可以在投票模块进行附议',
					imageUrl: 'https://clhy-img.oss-cn-beijing.aliyuncs.com/054193b0e3678a80f0673d956dd27ab.png',
					success: function(res) {},
					fail: function(err) {}
				});
				// #endif
			},





			//获取公示信息
			getVoteRecord() { //展示 基本信息 和报名的
				this.$request.api.getVoteRecord({
					essential_information_id: this.id,
				}).then(res => {
					this.voteRecordList = res.data.data.datalist;
					for (var i = 0; i < this.voteRecordList.length; i++) {
						this.id = this.voteRecordList[i].id
						console.log(this.id)

					}
				})
			},
			initActive() {
				this.activeIndex = this.initIndex || this.activeIndex
			},


		}
	}
</script>
<style lang='scss'>
	.redDotsStyle {
		width: 20rpx;
		height: 20rpx;
		line-height: 30rpx;
		background: red;
		border-radius: 50%;
		font-size: 24rpx;
		color: #fff;
		margin-left: 5px;
		position: absolute;
	}

	#voteIndex {
		background: #f4f4f4;
		height: 100vh;

		/*弹框*/
		.meeting-dialog {
			position: relative;

			::v-deep .u-mode-center-box {
				width: 670rpx !important;
				height: 800rpx;
				background: #FFFFFF !important;
				border-radius: 12rpx !important;
			}

			.meeting-wrap {
				padding: 40rpx;
			}

			.meeting-title {
				font-size: 18px;
				font-weight: bold;
				padding-bottom: 20px;
				border-bottom: 1px solid #E7ECE1;
			}

			.meeting-start {
				margin: 40rpx 0 24rpx;
				font-size: 16px;
				font-weight: bold;

				.img {
					width: 160px;
					height: 114px;
					margin: 0 auto;
					transform: translate(74px, 8px);
				}
			}

			.meeting-cont {
				color: red;
				font-size: 32rpx;
				border-bottom: 60rpx;
				margin-top: 50rpx;
				margin-bottom: 120rpx;
				text-align: center;
			}

			.succ {
				color: #333300;
				font-weight: bold;
			}

			.meeting-btn {
				width: 350rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: #FFFFFF;
				border-radius: 22px;
				border: 1px solid #427705;
				text-align: center;
				color: #427705;
				margin: 40px auto;
				font-weight: bold;
			}
		}






		.vote-title {
			font-size: 36rpx;
			font-weight: bold;
			margin: 50rpx auto;
			text-align: center;
		}

		.vote-wrap {
			margin: 20rpx 30rpx;

			.vote-item {
				width: 700rpx;
				height: 300rpx;
				background: #FFFFFF;
				border-radius: 6px;

				.agree {
					color: #999;
					font-size: 24rpx;
					text-align: center;
					padding: 34rpx 8rpx;
				}

			}

			.person-num {
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
			}

			.person-assets {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 40rpx;
			}

			.person-txt {
				color: #999;
			}

			.person-number {
				font-weight: bold;
				font-size: 16px;
				margin-top: 8rpx;
			}

			.line {
				width: 1px;
				height: 48rpx;
				background: #eee;
				margin: 0 126rpx;
			}

			.vote-item1 {
				width: 700rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 6px;
				margin-top: 40rpx;
				padding-top: 4rpx;
			}

			.vote-start {
				width: 570rpx;
				height: 88rpx;
				background: linear-gradient(180deg, #76D904 0%, #417505 100%);
				border-radius: 44rpx;
				text-align: center;
				line-height: 88rpx;
				color: #fff;
				margin: 60rpx auto;
			}

			.vote-success {
				width: 570rpx;
				height: 88rpx;
				border-radius: 44rpx;
				background: linear-gradient(180deg, #76D904 0%, #417505 100%);
				opacity: 0.5;
				text-align: center;
				line-height: 88rpx;
				color: #fff;
				margin: 60rpx auto;
			}

			.vote-startOne {
				width: 570rpx;
				height: 88rpx;
				background: linear-gradient(180deg, #ccc 0%, #999 100%);
				border-radius: 44rpx;
				text-align: center;
				line-height: 88rpx;
				color: #fff;
				margin: 60rpx auto;
			}

			.vote-bottom-txt {
				color: #999;
				font-size: 28rpx;
				text-align: center;
				font-weight: bold;
			}

		}
	}

	.my-tabs {
		height: 88upx;
		font-size: 28upx;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		border-top: 2upx solid #dddddd;
		border-bottom: 2upx solid #dddddd;
		min-width: 100%;
		overflow-x: auto;
		background: #fff;

		.tab-item {
			line-height: 48upx;
			padding: 20upx;
			min-width: 100upx;
			text-align: center;
		}

		.tab-item.active {
			position: relative;
			color: #427705;
		}

		.tab-item.active::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			border-bottom: 4upx solid #427705;
			animation: test ease 1 1.5s;
		}
	}

	.my-tabs.space-between {
		justify-content: space-between;
	}

	@keyframes test {
		0% {
			width: 100%
		}

		50% {
			width: 150%
		}

		100% {
			width: 100%
		}
	}

	.popup-all {
		background: #F5F5F5;
		padding: 13px 20px;
	}

	.share-detail {
		width: 17%;
		/* // height: 100rpx;
  // border: 2rpx solid #000; */
		padding: 13rpx;
		margin: 0rpx 0rpx 54rpx 40rpx;
		text-align: center;
	}

	.image-all {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.image-all image {
		width: 74rpx;
		height: 74rpx;
	}

	.font {
		/* // border: 2rpx solid #000; */
		margin-top: 12rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #999999;

	}

	.fx {
		text-align: center;
		padding: 16rpx 0rpx 24rpx 0rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
	}

	.cancel {
		height: 114rpx;
		background: #FFFFFF;
		text-align: center;
		font-size: 36rpx;
		font-weight: 400;
		color: #333333;
		line-height: 114rpx;
	}
</style>